<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>xml 的风格来控制元素</title>
		<script>
			function changeDiv1(){
				var d1=document.getElementById("d1");
				d1.parentNode.bgColor="yellow";
				//console.log(d1.previousSibling.nodeType);
				//d1.previousSibling.innerHTML="这是第一个div";
				
				d1.previousElementSibling.innerHTML="这是第一个div";
				d1.nextElementSibling.innerHTML="这是第2个div";
				d1.firstElementChild.href="https://www.taobao.com";
				d1.firstElementChild.target="_blank";
				d1.children[1].href="https://www.oschina.net";
				//d1.firstElementChild.nextElementSibling.href="https://www.oschina.com";
				d1.lastElementChild.href="https://www.cnblogs.com";
				d1.lastElementChild.target="_blank";
			}
		</script>
	</head>
	<body>
		<div>11111</div>
		<p id="d1">
			<a href="#">淘宝</a>
			<a href="#">oschina</a>
			<a href="#">jd</a>
			<a href="#">sina</a>
			<a href="#">百度</a>
			<a href="#">博客园</a>
		</p>
		<div>22222</div>
		<div>
			<button type="button" onclick="changeDiv1()">更改第一个Div</button>
		</div>
	</body>
</html>